<template>
	<view>
		<u-navbar :autoBack="true" leftIconColor="#ffffff" title="填写店铺资料" :placeholder="true" bgColor="#3ACD90"
			:titleStyle="{ color: '#FFFFFF', fontSize: '40rpx' }"></u-navbar>

		<view class="mt20" style="background-color: #ffffff;padding:0 20rpx">
			<u--form labelPosition="left" :model="shopInfo" :rules="rules" ref="uForm">
				<u-form-item label="店铺名称"  borderBottom labelWidth="200" prop="name">
					<u--input v-model="shopInfo.name" border="none"></u--input>
				</u-form-item>
				<u-form-item label="店铺简称" borderBottom labelWidth="200" prop="shortname">
					<u--input v-model="shopInfo.shortname" border="none"></u--input>
				</u-form-item>
				<u-form-item label="行业类型" borderBottom labelWidth="200">
					<u--input v-model="shopInfo.hangye" border="none"></u--input>
				</u-form-item>
				<u-form-item label="法人手机号" borderBottom labelWidth="200">
					<u--input v-model="shopInfo.farenphone" border="none"></u--input>
				</u-form-item>
				<u-form-item label="联系人手机号" borderBottom labelWidth="200">
					<u--input v-model="shopInfo.linkphone" border="none"></u--input>
				</u-form-item>
				<u-form-item label="邮箱" borderBottom labelWidth="200">
					<u--input v-model="shopInfo.email" border="none"></u--input>
				</u-form-item>
				<u-form-item label="法人身份证照片" borderBottom labelWidth="150">
					<view style="display: flex;">
						<view>
							<u-upload
								:fileList="fileList1"
								@afterRead="afterRead"
								@delete="deletePic"
								:maxCount="1"
								name="1"
							></u-upload>
						</view>
						<view>
								<u-upload
									:fileList="fileList2"
									@afterRead="afterRead"
									@delete="deletePic"
									:maxCount="1"
									name="2"
								></u-upload>
							</view>
						
					</view>

				</u-form-item>
				<u-form-item label="法人姓名" borderBottom labelWidth="200">
					<u--input v-model="shopInfo.farenname" border="none"></u--input>
				</u-form-item>
				<u-form-item label="法人身份证号" borderBottom labelWidth="200">
					<u--input v-model="shopInfo.farenidcard" border="none"></u--input>
				</u-form-item>
				<u-form-item label="身份证有效期开始" borderBottom labelWidth="200">
					<view @click="startShow = true" style="display: flex;">
					<u--input
							v-model="idcardStartTime"
							disabled
							disabledColor="#ffffff"
							placeholder="请选择"
							border="none"
					></u--input>
					<u-icon
						slot="right"
						name="arrow-right"
					></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="身份证有效期结束" borderBottom labelWidth="200">
					<view @click="endShow = true" style="display: flex;">
					<u--input
						v-model="idcardEndTime"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择"
						border="none"
					></u--input>
					<u-icon
						slot="right"
						name="arrow-right"
					></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="三合一证件照" borderBottom labelWidth="150">
					<u-upload
						:fileList="fileList3"
						@afterRead="afterRead"
						@delete="deletePic"
						name="3"
						:maxCount="1"
					></u-upload>
				</u-form-item>
				<u-form-item label="营业执照名称" borderBottom labelWidth="200">
					<u--input v-model="shopInfo.yingyename" border="none"></u--input>
				</u-form-item>
				<u-form-item label="社会统一信用码" borderBottom labelWidth="200">
					<u--input v-model="shopInfo.shehuicode" border="none"></u--input>
				</u-form-item>
				<u-form-item label="商户有效期开始" borderBottom labelWidth="200">
					<view @click="shanghuStartShow = true" style="display: flex;">
					<u--input
						v-model="shanghuStartTime"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择"
						border="none"
					></u--input>
					<u-icon
						slot="right"
						name="arrow-right"
					></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="商户有效期结束" borderBottom labelWidth="200">
					<view @click="shanghuEndShow = true" style="display: flex;">
					<u--input
						v-model="shanghuEndTime"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择"
						border="none"
					></u--input>
					<u-icon
						slot="right"
						name="arrow-right"
					></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="企业地址" borderBottom labelWidth="200">
					<u--input v-model="shopInfo.qiyeaddress" border="none"></u--input>
				</u-form-item>
				<u-form-item label="店铺门头照" borderBottom labelWidth="150">
					<u-upload
						:fileList="fileList4"
						@afterRead="afterRead"
						@delete="deletePic"
						:maxCount="1"
						name="4"
					></u-upload>
				</u-form-item>
				<u-form-item label="店铺内景照" borderBottom labelWidth="150">
					<u-upload
						:fileList="fileList5"
						@afterRead="afterRead"
						@delete="deletePic"
						name="5"
						:maxCount="1"
					></u-upload>
				</u-form-item>
				<u-form-item label="结算账户类型" borderBottom labelWidth="150">
					<view style="display: flex;">
						<view>
							<u-upload
								:fileList="fileList6"
								@afterRead="afterRead"
								@delete="deletePic"
								name="6"
								:maxCount="1"
							></u-upload>
						</view>
						<view>
								<u-upload
									:fileList="fileList7"
									@afterRead="afterRead"
									@delete="deletePic"
									name="7"
									:maxCount="1"
								></u-upload>
							</view>
						
					</view>
				
				</u-form-item>
				<u-form-item label="开户名" borderBottom labelWidth="200">
					<u--input v-model="shopInfo.kaihuming" border="none"></u--input>
				</u-form-item>
				<u-form-item label="银行卡卡号" borderBottom labelWidth="200">
					<u--input v-model="shopInfo.bankcardnum" border="none"></u--input>
				</u-form-item>
				<u-form-item label="开户行地址" borderBottom labelWidth="200">
					<u--input v-model="shopInfo.kaihuaddress" border="none"></u--input>
				</u-form-item>
				<u-form-item label="预留手机号" borderBottom labelWidth="200">
					<u--input v-model="shopInfo.savephone" border="none"></u--input>
				</u-form-item>
			</u--form>
		</view>
		
		<u-datetime-picker
				:show="startShow"
				v-model="shopInfo.idcardstart"
				mode="date"
				@confirm="startShowConfirm"
				@cancel="startShowCancel"
		></u-datetime-picker>
		
		<u-datetime-picker
				:show="endShow"
				v-model="shopInfo.idcardend"
				mode="date"
				@confirm="endShowConfirm"
				@cancel="endShowCancel"
				
		></u-datetime-picker>
		
		<u-datetime-picker
				:show="shanghuStartShow"
				v-model="shopInfo.shanghuStart"
				mode="date"
				@confirm="shanghuStartShowConfirm"
				@cancel="shanghuStartShowCancel"

		></u-datetime-picker>
		
		<u-datetime-picker
				:show="shanghuEndShow"
				v-model="shopInfo.shanghuEnd"
				mode="date"
				@confirm="shanghuEndShowConfirm"
				@cancel="shanghuEndShowCancel"
				
		></u-datetime-picker>
		
		<u-tabbar
			:value="value6"
			@change="name => value6 = name"
			:fixed="true"
			:placeholder="true"
			:safeAreaInsetBottom="true"
		>
			<u-tabbar-item text="返回" icon="play-right" @click="backview"></u-tabbar-item>
			<u-tabbar-item text="提交" icon="checkmark" @click="submit"></u-tabbar-item>
			
		</u-tabbar>
		
	</view>
</template>

<script>
	import dayjs from 'dayjs';
	import {
		uploadImg,
		shopinfoForm
	} from "@/common/apis/other.js"
	import {
		BASE_URL
	} from '@/env.js'
	export default {
		data() {
			return {
				startShow: false,
				endShow: false,
				idcardStartTime:"",
				idcardEndTime:"",
				
				shanghuStartShow:false,
				shanghuEndShow:false,
				shanghuStartTime:"",
				shanghuEndTime:"",
				
				shopInfo: {
					name: '',
					shortname: '',
					hangye:'',
					farenphone:'',
					linkphone:'',
					email:'',
					
					farenname:'',
					farenidcard:'',
					idcardstart:'',
					idcardend:'',
					
					yingyename:'',
					shehuicode:'',
					
					shanghuStart:'',
					shanghuEnd:'',
					
					qiyeaddress:'',
					kaihuming:'',
					bankcardnum:'',
					kaihuaddress:'',
					savephone:'',
					
					
					
					
					
					farenzhengmian:'',
					farenfanmian:'',
					sanheyi:'',
					mentouzhao:'',
					neijingtu:'',
					jiesuanzhengmian:'',
					jiesuanfanmian:''
					
					
					
				},
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'shortname': {
						type: 'string',
						required: true,
						message: '请填写简称',
						trigger: ['blur', 'change']
					},
				},
				fileList1:[],
				fileList2:[],
				fileList3:[],
				fileList4:[],
				fileList5:[],
				fileList6:[],
				fileList7:[],
				
			};
		},
		methods: {
			backview(){
				this.$Router.replace({
					path: '/pages/other/zizhu'
				})
				
			},
			submit(){
				this.$refs.uForm.validate().then(res => {
					
					uni.$u.toast('校验通过')

					shopinfoForm(this.shopInfo).then( result => {
						if(result.code == 1){
							uni.showToast({
								title: '提交成功',
								duration: 2000
							});
							this.$Router.replace({
								path: '/pages/other/zizhu'
							})
						}else{
							uni.showToast({
								title: '提交失败',
								duration: 2000
							});
						}
						
					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			startShowConfirm(value){
				this.startShow = false
				this.idcardStartTime = dayjs(value.value).format('YYYY-MM-DD');
				
			},
			startShowCancel(){
				this.startShow = false
			},
			endShowConfirm(value){
				this.endShow = false
				this.idcardEndTime = dayjs(value.value).format('YYYY-MM-DD');

			},
			endShowCancel(){
				this.endShow = false
			},
			shanghuStartShowConfirm(value){
				this.shanghuStartShow = false
				this.shanghuStartTime = dayjs(value.value).format('YYYY-MM-DD');
				
			},
			shanghuStartShowCancel(){
				this.shanghuStartShow = false
			},
			shanghuEndShowConfirm(value){
				this.shanghuEndShow = false
				this.shanghuEndTime = dayjs(value.value).format('YYYY-MM-DD');
			},
			shanghuEndShowCancel(){
				this.shanghuEndShow = false
			},
			// 新增图片
			async afterRead(event) {
				var indexTemp = event.name
				console.log('afterRead',event)
				
				this[`fileList${event.name}`].splice(1, 1, {url: event.file.url} )
				
				await this.uploadFilePromise(event.file.url).then( res => {
					let result = JSON.parse(res)

					let imageUrl = result.data
					if(indexTemp == 1){
						this.shopInfo.farenzhengmian = imageUrl
					}else if(indexTemp == 2){
						this.shopInfo.farenfanmian = imageUrl
					}else if(indexTemp == 3){
						this.shopInfo.sanheyi = imageUrl
					}else if(indexTemp == 4){
						this.shopInfo.mentouzhao = imageUrl
					}else if(indexTemp == 5){
						this.shopInfo.neijingtu = imageUrl
					}else if(indexTemp == 6){
						this.shopInfo.jiesuanzhengmian = imageUrl
					}else if(indexTemp == 7){
						this.shopInfo.jiesuanfanmian = imageUrl
					}
				})

				
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: BASE_URL+'/index/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'image',
						success: (res) => {
							resolve(res.data)
						}
					});
				})
			},
		},
		onReady() {
			// //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			// this.$refs.uForm.setRules(this.rules)
		},
	};
</script>